<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>能耗管理</title>
    <link rel="stylesheet" href="styles.css"> <!-- 假设你有样式文件 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 引入Chart.js -->
</head>
<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1><span class="highlight">系统</span>能耗管理</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li class="current"><a href="能耗管理.html">能耗管理</a></li>
                    <li><a href="设备管理.html">设备管理</a></li>
                    <li><a href="日志记录.html">日志记录</a></li>
                    <li><a href="用户管理.html">用户管理</a></li>
                    <li><a href="菜单管理.html">菜单管理</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="container">
        <h2>能耗管理数据</h2>
        <canvas id="energyChart"></canvas> <!-- 图表容器 -->
    </div>

    <script>
        // 假设这是从Modbus获取的数据
        const modbusData = {
            labels: ['1小时', '2小时', '3小时', '4小时'], // 时间标签
            datasets: [{
                label: '能耗数据',
                data: [120, 150, 180, 200], // 假设的能耗数据
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        };

        const config = {
            type: 'line', // 图表类型
            data: modbusData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };

        // 获取图表容器
        const energyChart = document.getElementById('energyChart').getContext('2d');
        // 创建图表
        new Chart(energyChart, config);
    </script>
</body>
</html>